<script setup>
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const createTagGroup = () => {
	router.push('/app/groupManagement/createTagGruop')
}
</script>
<template>
	<div class="main">
		<div class="empty-view">
			<p class="empty-view-title font-color-0 font-bold">标签建群</p>
			<img
				class="empty-icon margin-center-x"
				src="../../../../assets/img/img/batch-add-user_go_open_sms.44356cf336ac.png"
			/>
			<div class="intro-wrap margin-center-x">
				<div class="intro">
					<p class="title font-color-0 font-bold">标签客户一键拉群</p>
					<p>通过标签建群，给指定标签内的客户一键发送入<br />群邀请，让客户管理变得更加轻松，便捷</p>
				</div>
				<div class="intro">
					<p class="title font-color-0 font-bold">客户入群数据统计</p>
					<p>创建任务后，即可统计企业成员发送群邀请状<br />态，还可以统计客户是否入群等相关数据</p>
				</div>
			</div>
			<el-button @click="createTagGroup" class="margin-center-x ame-btn" type="primary">立即创建</el-button>
			<div class="intro-info-wrap margin-center-x">
				<div class="detail-wrap margin-center-x">
					<p class="title font-bold font-color-0">标签建群是什么？</p>
					<p>
						标签建群功能可以给指定标签内的客户一键发送群邀请，管理员在后台创建任务后，企业成员将收到【邀请客户入群】的群发通知，群发内容为入群<br />引导语+群二维码，成员确认发送后即可群发至标签内的客户
					</p>
					<p>发送群邀请时还可以过滤客户，不给已在群内的客户发送群邀请</p>
				</div>
				<div class="detail-wrap margin-center-x">
					<p class="title font-bold font-color-0">标签建群使用规则</p>
					<p>
						1.每位客户每月最多收到来自同一企业4条群发消息，若选择客户本月已经收到过4条群发消息，本条邀请将不会成功发送
					</p>
					<p>2.因企业微信限制，企业微信群人数在200人以下时才支持入群，拉群的客户人数超过200人时请添加多个群聊</p>
				</div>
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.font-bold {
	font-weight: 700;
}
.font-color-0 {
	color: #000;
}
.main {
	width: 100%;
	height: 100%;
	.empty-view {
		padding-top: 38px;
		padding-bottom: 86px;
		background: #fff;
		.empty-view-title {
			text-align: center;
			font-size: 20px;
		}
		.intro-info-wrap {
			box-sizing: border-box;
			padding-top: 24px;
			width: 964px;
			height: 280px;
			background: #fcfbfe;
			margin-top: 40px;
			.detail-wrap {
				width: 852px;
				margin-top: 24px;
				font-size: 13px;
				color: rgba(0, 0, 0, 0.45);
				p {
					margin-bottom: 8px;
				}
				.title {
					font-size: 14px;
					color: rgba(0, 0, 0, 0.85);
					margin-bottom: 8px;
					position: relative;
				}
				.title:before {
					position: absolute;
					content: '';
					display: block;
					width: 2px;
					height: 10px;
					top: 50%;
					-webkit-transform: translateY(-50%);
					transform: translateY(-50%);
					left: -12px;
					background: #1890ff;
				}
			}
		}
		.ame-btn {
			width: 224px;
			height: 40px;
			padding: 0 24px;
			font-size: 14px;
			border-radius: 2px;
			line-height: 40px;
			margin-top: 40px;
		}
		.intro-wrap {
			width: 750px;
			display: -webkit-box;
			display: flex;
			-webkit-box-align: center;
			align-items: center;
			-webkit-box-pack: justify;
			justify-content: space-between;
			.intro {
				font-size: 14px;
				color: rgba(0, 0, 0, 0.45);
				.title {
					font-size: 16px;
					margin-bottom: 6px;
					position: relative;
				}
				.title:before {
					position: absolute;
					content: '';
					display: block;
					width: 6px;
					height: 6px;
					top: 50%;
					-webkit-transform: translateY(-50%);
					transform: translateY(-50%);
					left: -12px;
					border-radius: 50%;
					background: #1890ff;
				}
			}
		}
	}
	.empty-icon {
		width: 231px;
		height: 197px;
	}
	.margin-center-x {
		margin-left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}
</style>
